// 参数数组， 返回数组
import { hsvToRgb } from '../helper/colorHelper'

// 选色器的每一个点
class Point {
    constructor(x, y, w, h, color) {
        this.x = x
        this.y = y
        this.w = w
        this.h = h
        this.color = color
    }
}

// 选色器
class ColorBox {
    constructor(x, y) {
        this.x = x
        this.y = y
        // 每个点的大小
        this.pointSide = 1
        // 默认颜色
        this.currentColor = new cc.Color(0, 0, 0, 255)
        // 默认边框颜色
        this.borderColor = new cc.Color(0, 162, 188, 255)
        // 默认当前色相的数值
        this.currentHNum = 150
        // 要被渲染的所有对象
        this.renderGroup = []
    }

    // 取色盒子
    createColorBox() {
        // 亮度饱和度的变化范围都是100
        return new Point(this.x, this.y, this.pointSide * 100, this.pointSide * 100, this.borderColor)
    }
    // 创建取色盒的内容  sv都是100， h 0-360 s横向v纵向
    createBoxContent() {
        let box = this.createColorBox()
        let contentArr = []
        for (let i = 0; i < 100; i++) {
            for (let j = 0; j < 100; j++) {
                let hsv = [this.currentHNum, i, j]
                let rgb = hsvToRgb(hsv)
                let color = new cc.Color(rgb[0], rgb[1], rgb[2], 255)
                let x = box.x + j
                let y = box.y + i
                let w = 1, h = 1
                let point = new Point(x, y, w, h, color)
                contentArr.push(point)
            }
        }
        return contentArr
    }

    // 色相调整条
    createColorBar() {
        let w = 6
        let h = 360 / 2
        return new Point(this.x - 8, this.y, w, h, this.borderColor)
    }

    // 创建色相调整条的内容
    createBarContent() {
        let bar = this.createColorBar()
        let contentArr = []
        let w = bar.w
        let h = 0.5
        for (let i = 0; i < 360; i++) {
            let rgb = hsvToRgb([i, 100, 100])
            let color = new cc.Color(rgb[0], rgb[1], rgb[2], 255)
            let x = bar.x 
            let y = bar.y + i * h
            let point = new Point(x, y, w, h, color)
            // console.log(point)
            contentArr.push(point)
        }
        return contentArr
    }

    // 创建当前颜色显示 返回数组
    createCurrntColorGroup() {
        let x = this.x
        let y = this.y - 30
        let w = 20, h = 20
        let box = new Point(x - 1, y - 1, w + 2, h + 2, this.borderColor)
        let content = new Point(x, y, w, h, this.currentColor)
        return [box, content]
    }

    // 可以优化的地方， box不必反复创建
    update() {
        let box = this.createColorBox()
        let bar = this.createColorBar()
        let currentGroup = this.createCurrntColorGroup()
        let boxcontent = this.createBoxContent()
        let barcontent = this.createBarContent()
        // let currentGroup = []
        // let boxcontent = []
        // let barcontent = []
        // let bar = []
        // let box = []
        let renderGroup = [box, bar, ...currentGroup, ...boxcontent, ...barcontent]
        this.renderGroup = renderGroup
    }

    getRenderGroup() {
        return this.renderGroup
    }

    // 判断是否点击到颜色框
    pointInBox(point) {
        let box = this.createColorBox()
        let left = box.x
        let right = box.x + box.w
        let top = box.y + box.h
        let bottom = box.y
        // 判断是否在区域内
        if (point.x > left && point.x < right) {
            if (point.y > bottom && point.y < top) {
                return true
            }
        }
        return false
    }

     // 判断是否点击到颜色条
     pointInBar(point) {
        let bar = this.createColorBar()
        let left = bar.x
        let right = bar.x + bar.w
        let top = bar.y + bar.h
        let bottom = bar.y
        // console.log(`left:${left}, right:${right}, top:${top}, bottom:${bottom}`)
        // 判断是否在区域内
        if (point.x > left && point.x < right) {
            if (point.y > bottom && point.y < top) {
                return true
            }
        }
        return false
    }

    changeH(point) {
        let bar = this.createColorBar()
        let top = bar.y + bar.h
        let bottom = bar.y
        this.currentHNum = ((point.y - bottom) / (top - bottom)) * 360
        this.update()
    }

    // s饱和度 从上到下递减  v明度从右到左递减
    changeCurrentColor(point) {
        let box = this.createColorBox()
        let left = box.x
        let right = box.x + box.w
        let top = box.y + box.h
        let bottom = box.y
        let s = ((point.y - bottom) / (top - bottom)) * 100
        let v = ((point.x - left) / (right - left)) * 100
        let hsv = [this.currentHNum, s, v]
        let rgb = hsvToRgb(hsv)
        this.currentColor = new cc.Color(rgb[0], rgb[1], rgb[2], 255)
    }

    getCurrentColor() {
        return this.currentColor
    }
}

export default ColorBox